<template>
	<view class="orderDetail u-flex-column-center">
		<view class="orderHeader u-flex-row-start">
			<image src="../../static/images/user/time.png" mode="" 
			class="orderFinish"></image>
			<text v-if="detail.status === 0">待支付</text>
			<text v-if="detail.status === 1">待发货</text>
			<text v-if="detail.status === 2">已发货</text>
			<text v-if="detail.status === 3">已完成</text>
			<text v-if="detail.status === 4">订单已取消</text>
		</view>
		<view class="orderCenter u-flex-row-start" >
			<image :src="detail.goods.images[0]" mode="" class="logo"></image>
			<view class="orderInfo">
				<view class="typeName">{{detail.goods.name}}</view>
				
			<!-- 	<view  class="orderRow u-flex-row-start" style="justify-content: space-between;">{{detail.serve.name}} <text>x1</text></view> -->
				<view  class="orderRow u-flex-row-start" style="justify-content: space-between;"
				v-if="detail.spu_name && detail.spu_name != null"
				>规格 <text>{{detail.spu_name}}</text></view>
				<view  class="price" >￥{{detail.price}}</view>
			</view>
		</view>
		<view class="orderBottom">
			<view class="orderNums u-flex-row-between">
				<view class="left">
					商品金额
				</view>
				<view>￥{{detail.price}}</view>
			</view>
			<view class="orderNums u-flex-row-between">
				<view class="left">
					运费
				</view>
				<view>无需邮寄</view>
			</view>
			<view class="heji u-flex-row-start" style="justify-content: flex-end;">
				合计：<text class="price">￥{{detail.price}}</text></view>
		</view>
		<view class="payInfo">
			<view class="orderTitle">订单信息</view>
			<view class="payList">
				下单时间：
				<text class="blackTexts">
                  {{detail.create_time}}
                </text>
			</view>
			<view class="payList" v-if="detail.status > 0 && detail.status !== 4">
				支付时间：
				<text class="blackTexts">
			      {{detail.pay_time}}
			    </text>
			</view>
			<view class="payList" v-if="detail.status === 2 || detail.status === 3">
				付款方式：
				<text class="blackTexts">
			      {{detail.pay_type}}
			    </text>
			</view>
			<view class="payList">
				订单编号：<text class="blackTexts">
			      
                   {{detail.order_no}}
               
			    </text>
				 <text class="copyText" @click="copy()">复制</text>
			</view>
			<view class="payList" v-if="detail.remark !== ''">
				备注：<text class="blackTexts">
			      
			       {{detail.remark}}
			   
			    </text>
			</view>
		</view>
		<view class="orderFooters u-flex-row-between">
			<view class="leftFoot">共计：<text class="price">￥{{detail.price}}</text></view>
			<view class="btns" v-if="detail.status === 0" @click.stop="payorder()">立即支付</view>
			<view class="btns" @click="kf" v-else>联系客服</view>
		</view>
	</view>
</template>

<script>
	import {orderDetail} from './request.js'
	export default{
		data () {
			return {
				id: '',
				detail: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			// console.log(option.id)
			this.getDetail()
		},
		methods:{
			getDetail() {
				let params = {
					order_no: this.id
				}
				orderDetail(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.detail = res.data.data
					}
				})
			},
			// 复制
			copy () {
				uni.setClipboardData({
				    data: this.detail.order_no,
				    success: function () {
				        console.log('success');
				    }
				})
			},
			// 打电话
			callPhone () {
				uni.makePhoneCall({
				    phoneNumber: this.detail.orderInfo.phone //仅为示例
				});
			},
			kf(){
				if(uni.getStorageSync('service_id')){
						uni.navigateTo({
							// service_id
							url:'/pages/TUI-Chat/chat?conversationID=C2C'+uni.getStorageSync('service_id')
						})
				}else{
					uni.showToast({
						title: '暂无客服',
						icon: 'none',
						duration: 2000
					})
				}
				
			},
			payorder () {
				uni.navigateTo({
					url: '../pay/pay?orderId=' + this.detail.order_no + '&price=' + this.detail.price
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-flex-row-start{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.u-flex-row-between{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.u-flex-column-center{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
	}
	.orderDetail{
		width: 100%;
		min-height: 100vh;
		background-color: #F3F4F5;
		padding-bottom: 30rpx;
		overflow: hidden;
		.orderHeader{
			width: 100%;
			height: 170rpx;
			background-color: #FA9700;
			color: #FFFFFF;
			font-size: 34rpx;
			
			.orderFinish{
				width: 50rpx;
				height: 50rpx;
				margin: 0 14rpx 0 20rpx;
			}
		}
	}
	.orderCenter{
		width: 100%;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		min-height: 200rpx;
		margin-top: 20rpx;
		align-items: flex-start;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #DFDFDF;
		.logo{
			width: 210rpx;
			height: 210rpx;
			margin-top: 40rpx;
			margin-right: 24rpx;
		}
		.orderInfo{
			width: calc(100% - 234rpx);
			min-height: 212rpx;
			color: #666666;
			font-size: 26rpx;
			margin-top: 40rpx;
			.typeName{
				color: #333333;
				font-size: 30rpx;
			}
			.lookText{
				color: #FC8E04;
			}
			.orderRow{
				margin-top: 14rpx;
			}
			.price{
				color: #F7382B;
				font-size: 34rpx;
				margin-top: 24rpx;
			}
			.phoneIcon{
				width: 42rpx;
				height: 42rpx;
				margin-left: 20rpx;
			}
		}
	}
	.orderBottom{
		width: 100%;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		// margin-top: 15rpx;
		min-height: 200rpx;
		overflow: hidden;
		.orderNums{
			color: #333333;
			margin-top: 28rpx;
			font-size: 30rpx;
			.left{
				color: #666666;
			}
		}
		.orderlist{
			margin-top: 20rpx;
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 10rpx;
			.shopImg{
				width: 200rpx;
				height: 200rpx;
				margin-right: 50rpx;
			}
			.rightInfo{
				width: calc(100% - 250rpx);
				.shopName{
					color: #333;
					font-size: 32rpx;
				}
				.guige{
					color: #666666;
					font-size: 26rpx;
					margin-top: 14rpx;
				}
				.price{
					color: #F7382B;
					font-size: 36rpx;
					margin-top: 14rpx;
				}
			}
		}
		.heji{
			color: #333333;
			font-size: 26rpx;
			height: 85rpx;
			.price{
				color: #FA4603;
				font-size: 30rpx;
			}
		}
	}
	.payInfo{
		width: 100%;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		min-height: 200rpx;
		padding-bottom: 25rpx;
		overflow: hidden;
		.orderTitle{
			color: #333;
			font-size: 30rpx;
			margin-top: 26rpx;
		}
		.payList{
			color: #666666;
			font-size: 30rpx;
			margin-top: 34rpx;
			.blackTexts{
				color: #333;
			}
			.copyText{
				color: #FA9700;
				font-size: 28rpx;
				margin-left: 30rpx;
			}
		}
	}
	.orderFooters{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		height: 96rpx;
		.leftFoot{
			color: #333333;
			font-size: 30rpx;
			.price{
				color: #F7382B;
				font-size: 36rpx;
			}
		}
		.btns{
			width: 208rpx;
			height: 60rpx;
			color: #fff;
			background-color: #FA9700;
			font-size: 30rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
		}
	}
</style>
